/**
 * 表情符号选择器组件
 * Emoji Picker Component
 */

class EmojiPicker {
  constructor(container, options = {}) {
    this.container = typeof container === 'string' ? document.querySelector(container) : container;
    this.options = {
      maxRecent: 20, // 最多显示20个最近使用的表情
      searchPlaceholder: '搜索表情符号...',
      categories: [
        { id: 'recent', name: '最近使用', icon: '🕒' },
        { id: 'smileys', name: '笑脸', icon: '😀' },
        { id: 'people', name: '人物', icon: '👤' },
        { id: 'animals', name: '动物', icon: '🐶' },
        { id: 'food', name: '食物', icon: '🍎' },
        { id: 'travel', name: '旅行', icon: '✈️' },
        { id: 'activities', name: '活动', icon: '⚽' },
        { id: 'objects', name: '物品', icon: '💡' },
        { id: 'symbols', name: '符号', icon: '❤️' },
        { id: 'flags', name: '旗帜', icon: '🏳️' }
      ],
      ...options
    };
    
    this.currentCategory = 'recent';
    this.searchQuery = '';
    this.recentEmojis = this.loadRecentEmojis();
    this.filteredEmojis = [];
    
    this.init();
  }

  /**
   * 初始化表情选择器
   */
  init() {
    if (!this.container) {
      console.error('Emoji Picker: Container not found');
      return;
    }

    this.loadEmojiData();
    this.createPicker();
    this.bindEvents();
    this.updateEmojiGrid();
  }

  /**
   * 加载表情数据
   */
  loadEmojiData() {
    // 表情符号数据 - 简化版本，实际项目中可以从外部文件加载
    this.emojiData = {
      smileys: [
        '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃',
        '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙',
        '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔',
        '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥',
        '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧'
      ],
      people: [
        '👶', '🧒', '👦', '👧', '🧑', '👨', '👩', '🧓', '👴', '👵',
        '👱', '👨‍🦰', '👩‍🦰', '👨‍🦱', '👩‍🦱', '👨‍🦲', '👩‍🦲', '👨‍🦳', '👩‍🦳', '🧔',
        '👤', '👥', '👪', '👫', '👬', '👭', '💏', '💑', '👨‍👩‍👧', '👨‍👩‍👧‍👦',
        '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤏', '✌️', '🤞', '🤟'
      ],
      animals: [
        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
        '🦁', '🐮', '🐷', '🐽', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒',
        '🐔', '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇',
        '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜'
      ],
      food: [
        '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍈',
        '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦',
        '🥬', '🥒', '🌶️', '🫑', '🌽', '🥕', '🫒', '🧄', '🧅', '🥔',
        '🍞', '🥐', '🥖', '🫓', '🥨', '🥯', '🥞', '🧇', '🧀', '🍖'
      ],
      travel: [
        '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐',
        '🛻', '🚚', '🚛', '🚜', '🏍️', '🛵', '🚲', '🛴', '🛹', '🛼',
        '🚁', '🛸', '✈️', '🛩️', '🛫', '🛬', '🪂', '💺', '🚀', '🛰️',
        '🚢', '⛵', '🚤', '🛥️', '🛳️', '⛴️', '🚂', '🚃', '🚄', '🚅'
      ],
      activities: [
        '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱',
        '🪀', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🪃', '🥅', '⛳',
        '🪁', '🏹', '🎣', '🤿', '🥊', '🥋', '🎽', '🛹', '🛷', '⛸️',
        '🥌', '🎿', '⛷️', '🏂', '🪂', '🏋️', '🤼', '🤸', '⛹️', '🤺'
      ],
      objects: [
        '💡', '🔦', '🕯️', '🪔', '🧯', '🛢️', '💸', '💵', '💴', '💶',
        '💷', '🪙', '💰', '💳', '💎', '⚖️', '🪜', '🧰', '🔧', '🔨',
        '⚒️', '🛠️', '⛏️', '🔩', '⚙️', '🪚', '🔫', '🧲', '💣', '🧨',
        '🪓', '🔪', '🗡️', '⚔️', '🛡️', '🚬', '⚰️', '🪦', '⚱️', '🏺'
      ],
      symbols: [
        '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
        '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️',
        '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '🛐',
        '⛎', '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐'
      ],
      flags: [
        '🏳️', '🏴', '🏁', '🚩', '🏳️‍🌈', '🏳️‍⚧️', '🇦🇫', '🇦🇽', '🇦🇱', '🇩🇿',
        '🇦🇸', '🇦🇩', '🇦🇴', '🇦🇮', '🇦🇶', '🇦🇬', '🇦🇷', '🇦🇲', '🇦🇼', '🇦🇺',
        '🇦🇹', '🇦🇿', '🇧🇸', '🇧🇭', '🇧🇩', '🇧🇧', '🇧🇾', '🇧🇪', '🇧🇿', '🇧🇯',
        '🇧🇲', '🇧🇹', '🇧🇴', '🇧🇦', '🇧🇼', '🇧🇷', '🇮🇴', '🇻🇬', '🇧🇳', '🇧🇬'
      ]
    };
  }

  /**
   * 创建选择器界面
   */
  createPicker() {
    this.container.innerHTML = `
      <div class="emoji-picker bg-white border border-neutral-200 rounded-lg shadow-lg overflow-hidden" style="width: 320px; height: 400px;">
        <!-- 搜索栏 -->
        <div class="p-3 border-b border-neutral-200">
          <div class="relative">
            <input 
              type="text" 
              id="emoji-search"
              placeholder="${this.options.searchPlaceholder}"
              class="w-full px-3 py-2 pl-8 text-sm border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            >
            <i class="fa fa-search absolute left-2.5 top-2.5 text-neutral-400 text-sm"></i>
          </div>
        </div>
        
        <!-- 分类标签 -->
        <div class="flex overflow-x-auto border-b border-neutral-200 bg-neutral-50">
          ${this.options.categories.map(category => `
            <button 
              class="category-btn flex-shrink-0 px-3 py-2 text-lg hover:bg-neutral-100 transition-colors ${category.id === this.currentCategory ? 'bg-primary text-white' : ''}"
              data-category="${category.id}"
              title="${category.name}"
            >
              ${category.icon}
            </button>
          `).join('')}
        </div>
        
        <!-- 表情网格 -->
        <div class="emoji-grid p-2 overflow-y-auto" style="height: 280px;">
          <div id="emoji-grid-content" class="grid grid-cols-8 gap-1">
            <!-- 表情将通过 updateEmojiGrid 方法填充 -->
          </div>
          
          <!-- 空状态 -->
          <div id="empty-state" class="hidden flex flex-col items-center justify-center h-full text-neutral-400">
            <i class="fa fa-search text-3xl mb-2"></i>
            <p class="text-sm">没有找到匹配的表情</p>
          </div>
        </div>
        
        <!-- 底部信息 -->
        <div class="border-t border-neutral-200 px-3 py-2 bg-neutral-50">
          <div class="flex items-center justify-between text-xs text-neutral-500">
            <span id="emoji-info">选择一个表情符号</span>
            <span id="emoji-count"></span>
          </div>
        </div>
      </div>
    `;

    this.searchInput = this.container.querySelector('#emoji-search');
    this.emojiGrid = this.container.querySelector('#emoji-grid-content');
    this.emptyState = this.container.querySelector('#empty-state');
    this.emojiInfo = this.container.querySelector('#emoji-info');
    this.emojiCount = this.container.querySelector('#emoji-count');
  }

  /**
   * 绑定事件
   */
  bindEvents() {
    // 搜索输入
    this.searchInput.addEventListener('input', (e) => {
      this.searchQuery = e.target.value.toLowerCase().trim();
      this.updateEmojiGrid();
    });

    // 分类切换
    this.container.querySelectorAll('.category-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const category = e.target.dataset.category;
        this.switchCategory(category);
      });
    });

    // 表情点击
    this.emojiGrid.addEventListener('click', (e) => {
      if (e.target.classList.contains('emoji-btn')) {
        const emoji = e.target.textContent;
        this.selectEmoji(emoji);
      }
    });

    // 表情悬停
    this.emojiGrid.addEventListener('mouseover', (e) => {
      if (e.target.classList.contains('emoji-btn')) {
        const emoji = e.target.textContent;
        this.showEmojiInfo(emoji);
      }
    });

    this.emojiGrid.addEventListener('mouseout', () => {
      this.emojiInfo.textContent = '选择一个表情符号';
    });
  }

  /**
   * 切换分类
   */
  switchCategory(categoryId) {
    // 更新按钮状态
    this.container.querySelectorAll('.category-btn').forEach(btn => {
      if (btn.dataset.category === categoryId) {
        btn.classList.add('bg-primary', 'text-white');
        btn.classList.remove('hover:bg-neutral-100');
      } else {
        btn.classList.remove('bg-primary', 'text-white');
        btn.classList.add('hover:bg-neutral-100');
      }
    });

    this.currentCategory = categoryId;
    this.searchQuery = '';
    this.searchInput.value = '';
    this.updateEmojiGrid();
  }

  /**
   * 更新表情网格
   */
  updateEmojiGrid() {
    let emojis = [];

    if (this.searchQuery) {
      // 搜索模式
      emojis = this.searchEmojis(this.searchQuery);
    } else if (this.currentCategory === 'recent') {
      // 最近使用
      emojis = this.recentEmojis;
    } else {
      // 分类显示
      emojis = this.emojiData[this.currentCategory] || [];
    }

    this.renderEmojis(emojis);
    this.updateEmojiCount(emojis.length);
  }

  /**
   * 搜索表情
   */
  searchEmojis(query) {
    const results = [];
    
    // 搜索所有分类
    Object.values(this.emojiData).forEach(categoryEmojis => {
      categoryEmojis.forEach(emoji => {
        // 这里简化搜索逻辑，实际项目中可以加入表情名称搜索
        if (this.getEmojiName(emoji).toLowerCase().includes(query)) {
          results.push(emoji);
        }
      });
    });

    // 去重
    return [...new Set(results)];
  }

  /**
   * 渲染表情
   */
  renderEmojis(emojis) {
    if (emojis.length === 0) {
      this.emojiGrid.classList.add('hidden');
      this.emptyState.classList.remove('hidden');
      return;
    }

    this.emojiGrid.classList.remove('hidden');
    this.emptyState.classList.add('hidden');

    this.emojiGrid.innerHTML = emojis.map(emoji => `
      <button 
        class="emoji-btn w-8 h-8 flex items-center justify-center text-lg hover:bg-neutral-100 rounded transition-colors"
        title="${this.getEmojiName(emoji)}"
      >
        ${emoji}
      </button>
    `).join('');
  }

  /**
   * 更新表情数量显示
   */
  updateEmojiCount(count) {
    if (this.searchQuery) {
      this.emojiCount.textContent = `找到 ${count} 个表情`;
    } else if (this.currentCategory === 'recent') {
      this.emojiCount.textContent = count > 0 ? `${count} 个最近使用` : '暂无最近使用';
    } else {
      this.emojiCount.textContent = `${count} 个表情`;
    }
  }

  /**
   * 选择表情
   */
  selectEmoji(emoji) {
    // 添加到最近使用
    this.addToRecent(emoji);
    
    // 触发选择事件
    this.dispatchEvent('select', { emoji });
    
    // 如果有回调函数，调用它
    if (typeof this.options.onSelect === 'function') {
      this.options.onSelect(emoji);
    }
  }

  /**
   * 添加到最近使用
   */
  addToRecent(emoji) {
    // 移除已存在的
    this.recentEmojis = this.recentEmojis.filter(e => e !== emoji);
    
    // 添加到开头
    this.recentEmojis.unshift(emoji);
    
    // 限制数量
    if (this.recentEmojis.length > this.options.maxRecent) {
      this.recentEmojis = this.recentEmojis.slice(0, this.options.maxRecent);
    }
    
    // 保存到本地存储
    this.saveRecentEmojis();
    
    // 如果当前在最近使用分类，更新显示
    if (this.currentCategory === 'recent' && !this.searchQuery) {
      this.updateEmojiGrid();
    }
  }

  /**
   * 显示表情信息
   */
  showEmojiInfo(emoji) {
    const name = this.getEmojiName(emoji);
    this.emojiInfo.textContent = `${emoji} ${name}`;
  }

  /**
   * 获取表情名称
   */
  getEmojiName(emoji) {
    // 简化的表情名称映射，实际项目中可以使用完整的表情数据库
    const emojiNames = {
      '😀': '开心',
      '😃': '高兴',
      '😄': '大笑',
      '😁': '咧嘴笑',
      '😆': '笑哭',
      '😅': '苦笑',
      '🤣': '笑翻',
      '😂': '喜极而泣',
      '🙂': '微笑',
      '🙃': '倒脸',
      '😉': '眨眼',
      '😊': '开心',
      '😇': '天使',
      '🥰': '爱心眼',
      '😍': '花痴',
      '🤩': '星星眼',
      '😘': '飞吻',
      '😗': '亲亲',
      '😚': '闭眼亲',
      '😙': '亲吻',
      '❤️': '红心',
      '💛': '黄心',
      '💚': '绿心',
      '💙': '蓝心',
      '💜': '紫心',
      '🖤': '黑心',
      '🤍': '白心',
      '🤎': '棕心',
      '👍': '点赞',
      '👎': '点踩',
      '👌': '好的',
      '✌️': '胜利',
      '🤞': '祈祷',
      '🤟': '爱你',
      '🤘': '摇滚',
      '👋': '挥手',
      '👏': '鼓掌',
      '🙏': '合十'
    };
    
    return emojiNames[emoji] || '表情符号';
  }

  /**
   * 加载最近使用的表情
   */
  loadRecentEmojis() {
    try {
      const stored = localStorage.getItem('emoji-picker-recent');
      return stored ? JSON.parse(stored) : [];
    } catch (error) {
      console.error('加载最近使用表情失败:', error);
      return [];
    }
  }

  /**
   * 保存最近使用的表情
   */
  saveRecentEmojis() {
    try {
      localStorage.setItem('emoji-picker-recent', JSON.stringify(this.recentEmojis));
    } catch (error) {
      console.error('保存最近使用表情失败:', error);
    }
  }

  /**
   * 获取最近使用的表情
   */
  getRecentEmojis() {
    return [...this.recentEmojis];
  }

  /**
   * 清空最近使用
   */
  clearRecent() {
    this.recentEmojis = [];
    this.saveRecentEmojis();
    
    if (this.currentCategory === 'recent') {
      this.updateEmojiGrid();
    }
  }

  /**
   * 分发事件
   */
  dispatchEvent(eventName, data) {
    const event = new CustomEvent(`emojiPicker:${eventName}`, {
      detail: data,
      bubbles: true,
      cancelable: true
    });
    
    this.container.dispatchEvent(event);
  }

  /**
   * 显示选择器
   */
  show() {
    this.container.style.display = 'block';
    this.searchInput.focus();
  }

  /**
   * 隐藏选择器
   */
  hide() {
    this.container.style.display = 'none';
  }

  /**
   * 切换显示状态
   */
  toggle() {
    if (this.container.style.display === 'none') {
      this.show();
    } else {
      this.hide();
    }
  }

  /**
   * 销毁组件
   */
  destroy() {
    this.container.innerHTML = '';
  }
}

// 导出表情选择器组件
window.EmojiPicker = EmojiPicker;